<template>
  <el-container direction="vertical">
    <el-main>
      <h1 style="margin-top: 40px;margin-bottom: 30px" class="bi-shop"> {{this.store.sname}}</h1>
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-food"></i> 食品</span>
          <div class="row justify-content-start feature">
            <div class="col-sm-6 col-md-5 col-lg-3" v-for="(items,index) in foods" :key="index">
              <Good :item="foods[index]"></Good>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-cold-drink"></i> 饮品</span>
          <div class="row justify-content-start feature">
            <div class="col-sm-6 col-md-5 col-lg-3" v-for="(items,index) in drinks" :key="index">
              <Good :item="drinks[index]"></Good>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-table-lamp"></i> 生活用品</span>
          <div class="row justify-content-start feature">
            <div class="col-sm-6 col-md-5 col-lg-3" v-for="(items,index) in lifes" :key="index">
              <Good :item="lifes[index]"></Good>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-paperclip"></i> 学习用品</span>
          <div class="row justify-content-start feature">
            <div class="col-sm-6 col-md-5 col-lg-3" v-for="(items,index) in studys" :key="index">
              <Good :item="studys[index]"></Good>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import Good from "../components/Good";
import axios from "axios";
export default {
  name: "Ventor",
  components: {Good},
  data(){
    return{
      store:'',
      foods:[],
      drinks:[],
      lifes:[],
      studys:[],
    }
  },
  methods:{

  },
  created() {
    //如果按照下面方法首先获取全部店铺表
    //只需改axios请求方法
    //有多种方法,做到这里联系我

    axios.get('http://r44734h518.zicp.vip:41569/store/getAllStore').then(res=>{

      for (var i=0;i<res.data.length;i++){
        if (res.data[i].sid==this.$route.query.id) {
          this.store = res.data[i];
        }
      }
    })
    axios.get('http://r44734h518.zicp.vip:41569/goods/getAllGoods').then(res=>{
      for (var i=0;i<res.data.length;i++) {
        if(res.data[i].sid==this.$route.query.id&&res.data[i].gkind==="食品"){
          this.foods.push(res.data[i]);
        } else if(res.data[i].sid==this.$route.query.id&&res.data[i].gkind==="饮料"){
          this.drinks.push(res.data[i]);
        } else if(res.data[i].sid==this.$route.query.id&&res.data[i].gkind==="学习用品"){
          this.studys.push(res.data[i]);
        } else if(res.data[i].sid==this.$route.query.id&&res.data[i].gkind==="生活用品"){
          this.lifes.push(res.data[i]);
        }
      }
    })
  }
}
</script>

<style scoped>

</style>
